<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap常用css样式</title>

    <script type="text/javascript" src="../libs/bootstrap-3.3.5/js/bootstrap.js"></script>
    <script type="text/javascript" src="../libs/angular/angular1.6.5.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../libs/bootstrap-3.3.5/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="example.css">
</head>
<body>
    <div class="container">
        <div id="main">
            <small>对于不需要强调的inline或block类型的文本，使用small标签。</small>
            <p style="color: red">文本对齐</p>
            <p class="text-left">Left aligned text.</p>
            <p class="text-center">Center aligned text.</p>
            <p class="text-right">Right aligned text.</p>

            <p style="color: red">强调类</p>
            <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
            <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
            <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
            <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

            <p>----------------------------------------------这是逗比分割线-----------------------------------------------</p>
            <p style="color: red">外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针</p>
            <abbr title="你好，我是bootstrap" class="initialism">这是一个缩略语</abbr>
            <p>----------------------------------------------这是逗比分割线-----------------------------------------------</p>
            <p style="color: red">地址</p>
            <address>
                <strong>@ author：</strong><br>
                <a href="mailto:1234564789@qq.com">1234564789@qq.com</a>
            </address>
            <p>----------------------------------------------这是逗比分割线-----------------------------------------------</p>
            <p style="color: red">默认按钮</p>
            <input type="button" class="btn" value="默认">
            <input type="button" class="btn btn-primary" value="主要">
            <input type="button" class="btn btn-info" value="信息">
            <input type="button" class="btn btn-success" value="成功">
            <input type="button" class="btn btn-warning" value="警告">
            <input type="button" class="btn btn-danger" value="危险">
            <input type="button" class="btn btn-link" value="链接">
            <p>----------------------------------------------这是逗比分割线-----------------------------------------------</p>
            <p style="color: red">按钮大小</p>
            <p>
                <button class="btn btn-primary" type="button">Default button</button>
                <button class="btn" type="button">Default button</button>
            </p>
            <p>
                <button class="btn btn-small btn-primary" type="button">Small button</button>
                <button class="btn btn-small" type="button">Small button</button>
            </p>
            <p>
                <button class="btn btn-mini btn-primary" type="button">Mini button</button>
                <button class="btn btn-mini" type="button">Mini button</button>
            </p>
            <p>----------------------------------------------这是逗比分割线-----------------------------------------------</p>
            <p style="color: red">图片</p>
            <img src="images/example1.png" class="img-rounded">
            <img src="images/example1.png" class="img-circle">
            <p>----------------------------------------------这是逗比分割线-----------------------------------------------</p>
            <p style="color: red">Glyphicons图标使用</p>
            <i style="font-size: 20px" class="glyphicon glyphicon-plus"></i>
            <i style="color: blueviolet" class="glyphicon glyphicon-trash"></i>
            <i class="glyphicon glyphicon-remove"></i>
            <i class="glyphicon glyphicon-search"></i>
            <i class="glyphicon glyphicon-chevron-up"></i>
            <i class="glyphicon glyphicon-chevron-down"></i>
            <i class="glyphicon glyphicon-chevron-left"></i>
            <i class="glyphicon glyphicon-chevron-left"></i>


            <i class="glyphicon glyphicon-arrow-left"></i>
            <i class="glyphicon glyphicon-arrow-right"></i>
            <i class="glyphicon glyphicon-arrow-up"></i>
            <i class="glyphicon glyphicon-arrow-down"></i>

            <i class="glyphicon glyphicon-list-alt"></i>
            <i class="glyphicon glyphicon-lock"></i>

            <i class="glyphicon glyphicon-play"></i>
            <i class="glyphicon glyphicon-pause"></i>
            <i class="glyphicon glyphicon-stop"></i>
            <i class="glyphicon glyphicon-forward"></i>
            <i class="glyphicon glyphicon-backward"></i>

            <i style="color: yellow" class="glyphicon glyphicon-warning-sign"></i>
        </div>
        <div class="btn-toolbar">
            <div class="btn-group">
                <a class="btn" href="#"><i class="glyphicon glyphicon-align-left"></i></a>
                <a class="btn" href="#"><i class="glyphicon glyphicon-align-center"></i></a>
                <a class="btn" href="#"><i class="glyphicon glyphicon-align-right"></i></a>
                <a class="btn" href="#"><i class="glyphicon glyphicon-align-justify"></i></a>
            </div>
        </div>
        <div class="btn-group">
            <a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-user icon-white"></i> User</a>
            <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
                <li><a href="#"><i class="glyphicon glyphicon-trash"></i> Delete</a></li>
                <li><a href="#"><i class="glyphicon glyphicon-ban-circle"></i> Ban</a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="i"></i> Make admin</a></li>
            </ul>
        </div>





    </div>

</body>
</html>